<template>
  <div
    class="filter-item-block m-flex-row m-flex-row--left"
    :class="[
      { 'm-flex-row m-flex-row--left': layout !== 'vertical' },
      { 'm-flex-col m-flex-col--left': layout === 'vertical' },
    ]">
    <div class="filter-item-name">{{ itemName }}</div>
    <div class="filter-item-option">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "FilterItem",
  props: {
    itemName: {
      type: String,
      default: "",
    },
    layout: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="scss">
.filter-item-block {
  width: 100%;
  margin: 20px 0;
  .filter-item-name {
    font-size: 15px;
    margin-right: 20px;
    margin-bottom: 10px;
  }

  .filter-item-option {
    width: 80%;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
}
</style>
